<template>
  <div class="login-container">
    <el-form v-if="debug" class="login-form" autocomplete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">创建TOKEN</h3>
      </div>

      <el-form-item prop="username">
        <span class="svg-container" style="margin-right:20px;">
          <svg-icon icon-class="user" />
        </span>

        <el-select v-model="userCode" placeholder="请选择要创建的Token" style="width: 240px;" @change="onSelectUser">
          <el-option
            v-for="item in userCodeList"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import Settings from '@/settings'
import AuthUserApi from '@api/auth/user'
import { setToken } from '@/utils/auth'
export default {
  name: 'Login',
  data() {
    return {
      loading: true,
      hasToken: false,
      debug: false,
      userCode: undefined,
      userCodeList: [
        {
          code: '70000026',
          label: '70000026-教职工'
        },
        {
          code: '202213530133',
          label: '202213530133-学  生'
        }
      ]
    }
  },
  created() {
    this.debug = Settings.debug
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    onSelectUser(val) {
      AuthUserApi.createDebugToken(val).then(response => {
        response = response.data
        if (response.code === 0) {
          const { data } = response
          setToken(data.token)
          this.$router.replace({ path: '/', query: this.otherQuery })
        } else {
          this.$message({ message: 'Token创建失败', type: 'error' })
        }
      }).catch(() => {
        this.$message({ message: 'Token创建失败', type: 'error' })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #1a3342;
  $light_gray: #308a8d;

  .login-container {
    min-height: 100%;
    width: 100%;
    background-image: url(~@/assets/login.png);
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-size: cover;
    overflow: hidden;

    .login-form {
      position: relative;
      width: 400px;
      max-width: 100%;
      top: 35%;
      left: 65%;
      overflow: hidden;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 28px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }

    .thirdparty-button {
      position: absolute;
      right: 0;
      bottom: 6px;
    }

    @media only screen and (max-width: 470px) {
      .thirdparty-button {
        display: none;
      }
    }
  }
</style>
